import { Component, toNative } from 'vue-facing-decorator'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import type { FilterDto } from '@/render/FilterRender'
import type { VxeGridPropTypes, VxeTableDataRow } from 'vxe-table'
import type { PageDto } from '@/api/types'
import type { AnyObject } from '@/types'
import { getCompanyProcessList, processRecord } from '@/api/company'
import type { CompanyProcessDto } from '@/api/company/types'
import dayjs from 'dayjs'
import renderModal, { getModelValue, renderForm, type FormModalDto } from '@/components/modal/Modal'
import { getReceiptData } from '@/utils/util'
import { message } from 'ant-design-vue'
import { ApprovalClientStatusCnEnum } from '@/const/enum'

@Component
export class ClientAuditView extends TableRender {

    curItem = {} as CompanyProcessDto

    basicFormConfig = this.initFormConfig() as FormModalDto
    initFormConfig() {
        return {
            title: '渠道账户选择',
            width: '400px',
            theme: 'light',
            show: false,
            labelCol: {
                style: {
                    width: '120px'
                }
            },
            items: {
                channelId: {
                    name: '默认收款渠道',
                    element: 'select',
                    optionsType: 'channel',
                    required: true,
                    callback: {
                        change: async (value: number) => {
                            this.basicFormConfig.items.receiptId.value = ''
                            if (value) {
                                this.basicFormConfig.items.receiptId.options =
                                    await getReceiptData(value)
                            } else {
                                this.basicFormConfig.items.receiptId.options = []
                            }
                        }
                    }
                },
                receiptId: {
                    name: '默认收款账号',
                    element: 'select',
                    required: true
                },
            },
            complete: async () => {
                const data = getModelValue(this.basicFormConfig)
                data.id = this.curItem.id
                data.status = ApprovalClientStatusCnEnum.已通过
                await processRecord(data)
                message.success('操作成功')
                this.basicFormConfig.show = false
                this.reloadPage()
            },
            cancel: () => {
                this.basicFormConfig.show = false
            },
            init: () => {}
        } as FormModalDto
    }


    filterConfig() {
        return {
            companyName: {
                name: '客户名称',
                element: 'input',
            },
            applyUserName: {
                name: '申请人',
                element: 'input'
            },
            applyTime: {
                name: '申请时间',
                element: 'rangePicker',
            },
        } as FilterDto
    }

    tableColumnConfigOld = () => [
        {
            field: 'operate',
            title: '操作',
            width: 150,
            params: {
                buttons: [
                    {
                        text: '通过',
                        event: (row) => this.onConfirm(row)
                    },
                    {
                        text: '驳回',
                        content: '确定驳回么？',
                        type: 'danger',
                        event: (row) => {}
                    }
                ]
            },
            slots: {
                default: 'buttons'
            }
        },
        {
            field: 'companyName',
            title: '客户名称',
            width: 200
        },
        {
            field: 'address',
            title: '证件地址',
        },
        {
            field: 'isRepeat',
            title: '是否重复',
            formatter: ({row}) => {
                return row.isRepeat ? '是' : '否'
            }
        },
        {
            field: 'isOpenPeriod',
            title: '申请人',
            params: {
                tooltip: {
                    text: (row) => row.applyUserName,
                    content: (row) => row.phone,
                }
            },
            slots: {
                default: 'tooltip'
            }
        },
        {
            field: 'position',
            title: '职位',
        },
        {
            field: 'applyRemark',
            title: '申请理由',
        },
        {
            field: 'applyTime',
            title: '申请时间',
            formatter: ({row}) => {
                return dayjs(row.applyTime).format('YYYY-MM-DD HH:mm')
            }
        }
    ] as TableRenderColumnTypes<CompanyProcessDto>

    onConfirm(row: CompanyProcessDto) {
        this.curItem = row
        this.basicFormConfig.show = true
    }

    async onReject(row: CompanyProcessDto) {
        await processRecord({
            id: row.id,
            status: ApprovalClientStatusCnEnum.已驳回
        })
        message.success('操作成功')
        this.basicFormConfig.show = false
        this.reloadPage()
    }

    onLoadData(page: number, size: number, filters: AnyObject) {
        filters.queryStartDate = filters.applyTime?.[0] || ''
        filters.queryEndDate = filters.applyTime?.[1] || ''
        delete filters.applyTime
        return getCompanyProcessList({
            pageSize: size,
            pageNum: page,
            ...filters,
        })
    }

    render() {
        return <>
            {super.render()}
            {renderModal(this.basicFormConfig)}
        </>
    }
}

export default toNative(ClientAuditView)